@extends('admin.layout')
@section('content')
    
      <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                首页
                <small>Mtime1.0</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Info boxes -->
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">内存使用率</span>
                            <span class="info-box-number">90<small>%</small></span>
                        </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                </div><!-- /.col -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">访问量</span>
                            <span class="info-box-number">41,410</span>
                        </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                </div><!-- /.col -->

                <!-- fix for small devices only -->
                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">销售额</span>
                            <span class="info-box-number">760</span>
                        </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                </div><!-- /.col -->
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">用户总数</span>
                            <span class="info-box-number">{{ $userCount }}</span>
                        </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                </div><!-- /.col -->
            </div><!-- /.row -->

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">网站流量统计</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <div class="btn-group">
                                    <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i
                                            class="fa fa-wrench"></i></button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="text-center">
                                        <strong>2016年1月 —— 2016年7月</strong>
                                    </p>
                                    <div class="chart">
                                        <!-- Sales Chart Canvas -->
                                        <canvas id="salesChart" style="height: 180px;"></canvas>
                                    </div><!-- /.chart-responsive -->
                                </div><!-- /.col -->
                                <div class="col-md-4">
                                    <p class="text-center">
                                        <strong>目标完成</strong>
                                    </p>
                                    <div class="progress-group">
                                        <span class="progress-text">添加购物车</span>
                                        <span class="progress-number"><b>160</b>/200</span>
                                        <div class="progress sm">
                                            <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                                        </div>
                                    </div><!-- /.progress-group -->
                                    <div class="progress-group">
                                        <span class="progress-text">完成购买</span>
                                        <span class="progress-number"><b>310</b>/400</span>
                                        <div class="progress sm">
                                            <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                                        </div>
                                    </div><!-- /.progress-group -->
                                    <div class="progress-group">
                                        <span class="progress-text">访问影评页面</span>
                                        <span class="progress-number"><b>480</b>/800</span>
                                        <div class="progress sm">
                                            <div class="progress-bar progress-bar-green" style="width: 80%"></div>
                                        </div>
                                    </div><!-- /.progress-group -->
                                    <div class="progress-group">
                                        <span class="progress-text">发送查询</span>
                                        <span class="progress-number"><b>250</b>/500</span>
                                        <div class="progress sm">
                                            <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
                                        </div>
                                    </div><!-- /.progress-group -->
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div><!-- ./box-body -->
                        <div class="box-footer">
                            <div class="row">
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block border-right">
                                        <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
                                        <h5 class="description-header">$35,210.43</h5>
                                        <span class="description-text">总收入</span>
                                    </div><!-- /.description-block -->
                                </div><!-- /.col -->
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block border-right">
                                        <span class="description-percentage text-yellow"><i
                                                class="fa fa-caret-left"></i> 0%</span>
                                        <h5 class="description-header">$10,390.90</h5>
                                        <span class="description-text">总成本</span>
                                    </div><!-- /.description-block -->
                                </div><!-- /.col -->
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block border-right">
                                        <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
                                        <h5 class="description-header">$24,813.53</h5>
                                        <span class="description-text">利润总额</span>
                                    </div><!-- /.description-block -->
                                </div><!-- /.col -->
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block">
                                        <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
                                        <h5 class="description-header">1200</h5>
                                        <span class="description-text">目标完成</span>
                                    </div><!-- /.description-block -->
                                </div>
                            </div><!-- /.row -->
                        </div><!-- /.box-footer -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->

            <!-- Main row -->
            <div class="row">
                <!-- Left col -->
                <div class="col-md-8">

                    <div class="row">
                        <div class="col-md-12">
                            <!-- USERS LIST -->
                            <div class="box box-danger">
                                <div class="box-header with-border">
                                    <h3 class="box-title">最新成员</h3>
                                    <div class="box-tools pull-right">
                                        <span class="label label-danger">新成员</span>
                                        <button class="btn btn-box-tool" data-widget="collapse"><i
                                                class="fa fa-minus"></i></button>
                                        <button class="btn btn-box-tool" data-widget="remove"><i
                                                class="fa fa-times"></i></button>
                                    </div>
                                </div><!-- /.box-header -->
                                <div class="box-body no-padding">
                                    <ul class="users-list clearfix" id="ulClone">
                                        <li  id="liClone" style="display:none">
                                            <img src="" style="width:128px; height:128px;" alt="头像">
                                            <a class="users-list-name" href="#">昵称</a>
                                            <span class="users-list-date">注册时间加入我们</span>
                                        </li>
                                    </ul><!-- /.users-list -->
                                </div><!-- /.box-body -->
                                <div class="box-footer text-center">
                                    <a href="javascript::" class="uppercase" id="moreUser">查看更多</a>
                                </div><!-- /.box-footer -->
                            </div><!--/.box -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->

                    <!-- TABLE: LATEST ORDERS -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">最新影评</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            <div class="table-responsive">
                                <table class="table no-margin">
                                    <thead>
                                    <tr>
                                        <th>电影名</th>
                                        <th>标题</th>
                                        <th>用户昵称</th>
                                        <th>回复量</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr id="trClone" style="display:none">
                                        <td class="pname"><a href="pages/examples/invoice.html">电影名</a></td>
                                        <td class="postTitle">标题11</td>
                                        <td class="uName"><span class="label label-success">用户昵称</span></td>
                                        <td class="couns">
                                            <div class="sparkbar" data-color="#00a65a" data-height="20">
                                                90,80,90,-70,61,-83,63
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!-- /.table-responsive -->
                        </div><!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <div class="box-footer text-center">
                                <a href="javascript::" id="trUser" class="uppercase" id="ajaxpost">查看更多</a>
                            </div><!-- /.box-footer -->
                        </div><!-- /.box-footer -->
                    </div><!-- /.box -->
                </div><!-- /.col -->

                <div class="col-md-4">
                   
                    <div class="info-box bg-red">
                        <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">短片下载量</span>
                            <span class="info-box-number">114,381</span>
                            <div class="progress">
                                <div class="progress-bar" style="width: 70%"></div>
                            </div>
                        </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->
                    <div class="info-box bg-aqua">
                        <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">影评总量</span>
                            <span class="info-box-number">163,921</span>
                            <div class="progress">
                                <div class="progress-bar" style="width: 40%"></div>
                            </div>
                        </div><!-- /.info-box-content -->
                    </div><!-- /.info-box -->

                    <div class="box box-default">
                        <div class="box-header with-border">
                            <h3 class="box-title">浏览器使用分布</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="chart-responsive">
                                        <canvas id="pieChart" height="150"></canvas>
                                    </div><!-- ./chart-responsive -->
                                </div><!-- /.col -->
                                <div class="col-md-4">
                                    <ul class="chart-legend clearfix">
                                        <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
                                        <li><i class="fa fa-circle-o text-green"></i> IE</li>
                                        <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
                                        <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
                                        <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
                                        <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
                                    </ul>
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div><!-- /.box-body -->
                        <div class="box-footer no-padding">
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="#">南方<span class="pull-right text-red"><i
                                        class="fa fa-angle-down"></i> 12%</span></a></li>
                                <li><a href="#">北方<span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
                            </ul>
                        </div><!-- /.footer -->
                    </div><!-- /.box -->

                    <!-- PRODUCT LIST -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">最近添加</h3>
                            <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-body">
                            <ul class="products-list product-list-in-box" id="tysClone">
                                <li class="item" id="tyClone" style="display:none">
                                    <div class="product-img">
                                        <img src="{{ url('/admin/dist/img/default-50x50.gif') }}" alt="Product Image">
                                    </div>
                                    <div class="product-info">
                                        <a href="javascript::;" class="product-title">电影名 </a>
                                            <span class="label label-warning pull-right" id="type">￥35</span>
                                        
                                        <span class="product-description">
                                            主演
                                        </span>
                                    </div>
                                </li><!-- /.item -->
                            </ul>
                        </div><!-- /.box-body -->
                        <div class="box-footer text-center">
                            <a href="javascript::;" class="uppercase" id="tyUser">查看更多</a>
                        </div><!-- /.box-footer -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
<script type="text/javascript">
    //声明一个全局变量
    var p = 1;
    var pp = 1;
    var ppp = 1;

    run();
    pun();
    tun();
    $('#moreUser').on('click', function(){
        
        run();

    })
    $('#trUser').on('click', function(){
        
        pun();

    })

    $('#tyUser').on('click', function(){
        
        tun();

    })

    function run()
    {
        $.ajax({
            url:'/admin/index/ajaxmore',
            type:'GET',
            dataType:'json',
            data:'page=' + p,
            success:function(data)
            {
                $.each(data, function(i){
                        var item = $('#liClone').clone();
                        //修改数据
                        item.find('img').attr('src', data[i]['photo']);
                        item.find('a').html(data[i]['name']);
                        item.find('span').html(data[i]['ctime'] + '加入我们');
                        //显示
                        item.show();

                        //添加数据
                        $('#ulClone:eq()').append(item);
                    })
                 p++;
            },
            error:function()
                {
                    alert('数据异常');
                }
        });
    }

    //
    function pun()
    {
        $.ajax({
            url:'/admin/index/ajaxpost',
            type:'GET',
            dataType:'json',
            data:'p=' + pp,
            success:function(data)
            {
                $.each(data, function(i){
                        var tdem = $('#trClone').clone();
                        //修改数据
                       
                        tdem.children("td[class='pname']").find('a').html(data[i]['name']);
                        tdem.children("td[class='pname']").find('a').attr('href','./admin/post/index/' + data[i]['tid']);
                        tdem.children("td[class='postTitle']").html(data[i]['title']);
                        tdem.children("td[class='uName']").find('span').html(data[i]['uname']);
                        tdem.children("td[class='couns']").find('div').html(data[i]['couns']);
                        //显示
                        tdem.show();

                        //添加数据
                        $('#trClone:eq()').after(tdem);
                    })
                 pp++;
            },
            error:function()
                {
                    alert('数据异常');
                }
        });
    }
    //
    function tun()
    {
        $.ajax({
            url:'/admin/index/ajaxtypes',
            type:'GET',
            dataType:'json',
            data:'g=' + ppp,
            success:function(data)
            {
                $.each(data, function(i){
                        var item = $('#tyClone').clone();
                        //修改数据
                        item.find('img').attr('src', data[i]['photo']);
                        item.find('a').html(data[i]['name']);
                        if(data[i]['type'] == 1)
                        {
                            item.find('span[id="type"]').html('电视剧');
                        }else
                        {
                            item.find('span[id="type"]').html('电影');
                        }
                        item.find('span[class="product-description"]').html(data[i]['cast']);
                        //显示
                        item.show();

                        //添加数据
                        $('#tysClone:eq()').append(item);
                    })
                 ppp++;
            },
            error:function()
                {
                    alert('数据异常');
                }
        });
    }

</script>
@endsection


